import React,{useCallback} from 'react';
import Search from './Search'
import Navbar from './Navbar';
import ReadList from './ReadList'
import NavHead from '@c/navBar/NavHead'
import { FlexCon } from './readStyled'
import { useDispatch } from 'react-redux'
import { loadAsync } from '../actionCreater'

const ReadUi = (props) => {

    const dispatch = useDispatch()

    const serchHandle = useCallback((v) => {
        dispatch(loadAsync(v))
        // console.log(v);
    }, [dispatch])

    return (
        <FlexCon>
            <NavHead title={'绘本阅读'}></NavHead>
            <Search serchModel = {serchHandle}></Search>
            <Navbar list={props.navlist}></Navbar>
            <ReadList {...props}></ReadList>
        </FlexCon>
    );
}

export default ReadUi;